<template>
  <div>
    <div class="form">
      <div class="search">
        <div class="date_picker pad_right">
          <el-date-picker
            v-model="dataValue"
            type="daterange"
            range-separator="-"
            start-placeholde="开始日期"
            end-placeholde="结束日期"
          ></el-date-picker>
        </div>
        <el-select
          multiple
          collapse-tags
          v-model="areaCodes"
          placeholder="区域名称"
          class="search_info"
          @change="changeSelect($event)"
        >
          <el-option
            v-for="item in areaList"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          ></el-option>
        </el-select>
        <div>
          <el-button @click="reset()">重置</el-button>
          <el-button type="primary" @click="getList(1)" class="searchBtn">查询</el-button>
        </div>
      </div>
      <el-table
        class="listTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="序号" prop="id" align="center" type="index" :index="indexMethod"></el-table-column>
        <el-table-column label="地区名称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.baseName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请笔数" align="center">
          <template slot-scope="{row}">
            <span>{{ row.financeAmountTotal }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请总额(万元)" align="center">
          <template slot-scope="{row}">
            <span>{{ row.financeAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="授信笔数" align="center">
          <template slot-scope="{row}">
            <span :class="{'res_color': row.taskStatus == 2}">{{ row.approveAmountTotal }}</span>
          </template>
        </el-table-column>
        <el-table-column label="授信金额(万元)" align="center">
          <template slot-scope="{row}">
            <span :class="{'res_color': row.taskStatus == 2}">{{ row.approveAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="放款笔数" align="center">
          <template slot-scope="{row}">
            <span :class="{'res_color': row.taskStatus == 2}">{{ row.loanAmountTotal }}</span>
          </template>
        </el-table-column>
        <el-table-column label="放款总额(万元)" align="center">
          <template slot-scope="{row}">
            <span :class="{'res_color': row.taskStatus == 2}">{{ row.loanAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="期末贷款总额(万元)" align="center">
          <template slot-scope="{row}">
            <span :class="{'res_color': row.taskStatus == 2}">{{ row.loanAmountAll }}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :total="total"
        layout="total, sizes, prev, pager, next"
        :page-size="limit"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        :current-page.sync="curPage"
        @current-change="getList($event)"
        class="sortStyle"
      />
    </div>
  </div>
</template>

<script>
import { getNumericalStatement, dictType } from "@/api/system/user";
import {
  allBatchDelete,
  batchDelete,
  allSubmit,
  submit,
  creatWork,
  getRecieveList,
  getList,
  cancelOpt,
  listPreview,
  audit,
  overUdit,
  listPreviewCity,
  downLoadExampel,
  upLoadExampel,
  companyPreview
} from "@/api/article";
import { MessageBox } from "element-ui";
export default {
  components: {},
  data() {
    return {
      workCode: "",
      workStatus: "",
      status: [],
      list: [],
      listLoading: false,
      total: 0,
      limit: 10,
      curPage: 1,
      listData: [],
      detailShow: false,
      areaList: [],
      dataValue: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      // 日期范围
      dateRange: [],
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      areaCodes: [],
      oldSelectVal: []
    };
  },
  created() {},
  mounted() {
    // this.getList(1)
    this.getList(1);
    this.getArea();
  },
  methods: {
    /** 查询用户列表 */
    getList(page) {
      var params = {
        pageNum: page,
        pageSize: this.limit,
        type: 3
      };
      if (this.dataValue) {
        let newStartDate = new Date(this.dataValue[0]);
        let starttime =
          newStartDate.getFullYear() +
          "-" +
          (newStartDate.getMonth() + 1) +
          "-" +
          newStartDate.getDate();
        let newEndDate = new Date(this.dataValue[1]);
        let endtime =
          newEndDate.getFullYear() +
          "-" +
          (newEndDate.getMonth() + 1) +
          "-" +
          newEndDate.getDate();
        params.startTime = starttime;
        params.endTime = endtime;
      }
      if (this.areaCodes) {
        let deptIds1 = this.areaCodes;
        if (deptIds1.includes("ALL")) {
          const index = deptIds1.indexOf("ALL");
          deptIds1.splice(index, 1);
        }
        params.areaCodes = deptIds1.join(",");
      }
      this.listLoading = true;
      getNumericalStatement(this.$qs.stringify(params)).then(response => {
        this.listLoading = false;
        if (response.code == 200) {
          this.list = response.rows;
          this.total = response.total;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    reset() {
      this.dataValue = "";
      this.areaCodes = [];
    },
    //区域
    getArea() {
      dictType("area_codes").then(res => {
        this.areaList = res.data;
        this.areaList.unshift({ dictValue: "ALL", dictLabel: "全选" });
      });
    },
    changeSelect(val) {
      let selectVal = this.areaCodes;
      let oldSelectVal = this.oldSelectVal;
      let arr = this.areaList;
      let allValues = [];
      for (let item of arr) {
        allValues.push(item.dictValue);
      }
      if (val.includes("ALL")) {
        if (!oldSelectVal.includes("ALL")) {
          selectVal = allValues;
        } else {
          const index = val.indexOf("ALL");
          val.splice(index, 1);
          selectVal = val;
        }
      } else {
        if (oldSelectVal.includes("ALL")) {
          selectVal = [];
        } else if (allValues.length - 1 === val.length) {
          selectVal = allValues;
        }
      }
      this.areaCodes = selectVal;
      this.oldSelectVal = selectVal;
    },
    indexMethod(index) {
      index = index + 1 + (this.curPage - 1) * this.limit;
      return index;
    },
    goback() {
      this.detailShow = false;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getList(1);
    },
    //任务详情
    preview(id) {
      this.detailShow = true;
    }
    //企业名单列表
    // getList(page) {
    //   var params = {
    //       page: page,
    //       size: this.limit,
    //       taskName : this.workName,
    //       taskNo : this.workCode,
    //       status: this.workStatus,
    //     }
    //   if (this.workStartTime) {
    //     params.startDate = this.formdate(this.workStartTime)
    //   }
    //   if (this.workEndTime) {
    //     params.endDate = this.formdate(this.workEndTime)
    //   }
    //   this.listLoading = true
    //   getList(params).then(res => {
    //     this.listLoading = false
    //     if (res.code == 200) {
    //       this.list = res.data.list
    //       this.total = res.data.total
    //       this.list.forEach(element => {
    //         if (this.roleId == '001009') {
    //           switch (element.taskStatus) {
    //             case '1':
    //               element.taskStatu = '名单上报中'
    //               break;
    //             case '2':
    //               element.taskStatu = '名单审核中'
    //               break;
    //             case '3':
    //               element.taskStatu = '名单已分发'
    //               break;
    //             case '4':
    //               element.taskStatu = '已撤销'
    //               break;
    //           }
    //         } else {
    //           if (element.taskStatus == '2') {
    //             element.taskStatu = '未处理'
    //           } else {
    //             element.taskStatu = '已处理'
    //           }
    //         }
    //       });
    //     } else {
    //       this.$message({message: res.msg,type: 'error'})
    //     }
    //   })
    // },
  }
};
</script>
<style scoped>
.form {
  padding-left: 26px;
  padding-right: 24px;
  padding-top: 24px;
  background: #fff;
}
.search {
  display: flex;
  position: relative;
}
.search_info {
  width: 192px;
  height: 40px;
  margin-right: 16px;
}
.searchBtn {
  margin-left: 16px;
  height: 36px;
}
.sortStyle {
  height: 19px;
  float: right;
  /* right: 24px; */
  margin-top: 20px;
  margin-bottom: 30px;
}
.pos_right_btn {
  position: absolute;
  right: 0;
}
.opt_font {
  cursor: pointer;
  color: #2e82ff;
}
.detail_title {
  font-size: 16px;
  font-weight: 400;
  color: #212121;
  line-height: 22px;
}
.detail_title span {
  padding-left: 4px;
  background: #1e88e5;
  margin-right: 12px;
}
.row {
  display: flex;
  padding-bottom: 12px;
}
.detail_info {
  padding-top: 16px;
}
.info_left {
  display: flex;
}
.info_right {
  display: flex;
  padding-left: 202px;
}
.info_left_title {
  font-size: 14px;
  font-weight: 400;
  color: #616161;
  line-height: 20px;
  width: 112px;
  margin-right: 16px;
}
.info_left_content {
  font-size: 14px;
  font-weight: 400;
  color: #212121;
  line-height: 20px;
  width: 150px;
}
.pos_top {
  padding-top: 12px;
}
.detailTable {
  margin-top: 16px;
}
.opt_font {
  color: #1e88e5;
  cursor: pointer;
}
.page_pos {
  text-align: right;
  padding-top: 10px;
}
.backBtn {
  text-align: center;
  margin-top: 10px;
}
/deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% -30px);
  /* max-width: ; */
}
/deep/ .el-dialog .el-dialog__body {
  flex: 1;
  height: 700px;
  overflow-y: auto;
  padding-top: 0;
}
.tab {
  display: flex;
  position: absolute;
  right: 32px;
  top: 14px;
}
.tab_border {
  border: 1px solid #409eff;
  color: #409eff;
  padding: 10px 12px;
  font-size: 14px;
  margin-right: 16px;
}
.change {
  border: 1px solid #f56c6c;
  color: #f56c6c;
}
.listTable {
  margin-top: 17px;
}
.pad_right {
  padding-right: 20px;
}
</style>
